<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>微信聊天窗口</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑'
        }


        #container {
            width: 450px;
            height: 600px;
            background: #eee;
            margin: 10px auto 0;
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
            box-shadow: 0px 0px 16px #999;
        }

        .header {
            background: #000;
            height: 34px;
            color: #fff;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            padding: 0 10px;
        }

        .footer {
            position: fixed;
            padding: 10px;
            bottom: 300px;
            width: 430px;
            height: 40px;
            background: #999;
        }

        .footer input {
            width: 300px;
            height: 38px;
            outline: none;
            font-size: 16px;
            text-indent: 10px;
            position: absolute;
            border-radius: 6px;
            right: 80px;
        }

        .footer span {
            display: inline-block;
            width: 62px;
            height: 38px;
            background: #ccc;
            font-weight: 900;
            line-height: 38px;
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 14px;
            border-radius: 6px;
        }

        .footer span:hover {
            color: #777;
            background: #ddd;
        }

        .icon {
            display: inline-block;
            background: red;
            width: 50px;
            height: 50px;
            border-radius: 30px;
            position: absolute;
            bottom: 3px;
            left: 10px;
            cursor: pointer;
            overflow: hidden;
        }

        img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
        }

        .content {
            font-size: 20px;
            width: 435px;
            height: 662px;
            padding: 5px;
        }

        .content li {
            display: flex;
            margin-top: 10px;
            padding-left: 10px;
            width: 412px;
            clear: both;
            overflow: hidden;
        }

        li.current {
            flex-direction: row-reverse;
        }

        .content li img {
            float: left;
        }

        .content li span {
            background: #7cfc00;
            padding: 10px;
            border-radius: 10px;
            float: left;
            margin: 6px 10px 0 10px;
            max-width: 310px;
            border: 1px solid #ccc;
            box-shadow: 0 0 3px #ccc;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="header"> <span style="float: right;">20:30</span> <span style="float: left;">小泽老师</span> </div>

        <ul class="content">
        </ul>

        <div class="footer">
            <div class="icon"> <img src="img/1.png" alt="" id="icon"> </div>
            <input id="text" type="text" placeholder="说点什么吧..."> <span id="btn">发送</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    'use strict'

    // 思路分析：
    // ①点击图片实现用户切换功能
    // 	1-1：默认两个用户，通过点击来回切换
    // ②点击发送按钮，把用户的聊天内容展示连天区域
    // 	2-1：点击发送按钮，把聊天内容展示在聊天区域
    // 	2-2：设定聊天在连天区域内不同位置显示


    const img = document.querySelector('#icon')
    const chatArea = document.querySelector('.content')
    const submitBtn = document.querySelector('#btn')
    const chatInfo = document.querySelector('[type=text]')



    // 对象存储图片路径信息
    let arrImg = {
        0: 'img/1.png',
        1: 'img/2.png'
    }

    let flag = 0

    // 点击切换头像
    let changeImg = () => {
        img.addEventListener('click', () => {
            if (flag == 0) {
                img.src = arrImg[1]
                flag = 1
            } else {
                img.src = arrImg[0]
                flag = 0
            }
        })
    }
    changeImg()


    // 点击按钮发送消息
    let setMessages = () => {
        submitBtn.addEventListener('click', () => {
            let liEle = document.createElement('li')

            if (chatInfo.value === '') {
                alert('输入内容不能为空')
            } else {
                liEle.innerHTML = '<img src=' + arrImg[flag] + ' /><span>' + chatInfo.value + '</span>'
                chatArea.appendChild(liEle)

                // 4 发送完成清空聊天框
                chatInfo.value = ''
            }
            // 3 老套路, 手动点击
            flag != 0 && liEle.classList.add('current')


        })
    }
    setMessages()

    chatInfo.addEventListener('keydown', (e) => {
        if (e.which == 13) {
            submitBtn.click()
        }

    })
</script>

</html>